<template>
	<view>
		    <view align="left">
		      <van-cell>
		        <template #title>
		          <span class="custom-title" style="height: 3rem;line-height: 3rem">头像</span>
		        </template>
		        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
		        <template #right-icon>
		          <image style="width: 100rpx;height: 100rpx;border-radius: 50%;" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
		        </template>
		      </van-cell>
			  <view>
			  	 <van-cell is-link title="昵称" value="你的昵称"@click="popUp1" />
			  	<n-transition ref="pop" speed="ease-in-out" :height="500" :maskVal="0.5">内容</n-transition>
			  </view>
		     
		      <van-action-sheet v-model="show" title="标题">
		        <view class="content">内容</view>
		      </van-action-sheet>
		      <van-cell title="ID" value="123456"/>
			  <view >
			  	<van-cell is-link title="性别" value="男"/>
			  </view>
		      
		      <van-action-sheet v-model="showSex" :actions="actions" @select="onSelect" />
		      <van-cell is-link title="位置" value="未选择" @click="btnClick"/>
		      <!-- van-action-sheet v-model="showArea" title="地址">
		        <van-area
		          :area-list="areaList"
		          :columns-placeholder="['请选择', '请选择', '请选择']"
		          @cancel="cancelArea"
		          @confirm = "confirmArea"
		        />
		      </van-action-sheet> -->
			 
			  <selectAddress :value="areaTest" v-model="showArea" ref='selectAddress' @selectAddress="successSelectAddress"></selectAddress>
		      
<!-- 		      <van-action-sheet v-model="showBirthday" title="生日">
		        <van-datetime-picker
		          v-model="currentDate"
		          type="date"
		          title="选择年月日"
		          :min-date="minDate"
		          :max-date="maxDate"
		          @cancel="cancelBirthday"
		          @confirm = "confirmBirthday"
		        />
		      </van-action-sheet> -->
		    </view>
			<xp-picker :action-position="actionPosition" :history="history" :year-range="[2020,2030]" @confirm="confirm">
				<van-cell is-link title="生日" value="未选择" @click="showBirthday = true" />
			</xp-picker>
	</view>
</template>

<script>
	import nTransition from '@/components/n-transition/n-transition.vue';
	import selectAddress from '@/components/yixuan-selectAddress/yixuan-selectAddress.vue';
	export default {
		components: { nTransition,selectAddress },
		data() {
			return {
				// 昵称展示层
				        show:false,
				        // 性别展示层
				        showSex:false,
				        actions: [{ name: '男' }, { name: '女' }, { name: '保密' }],
				        // 地区列表
				        areaList,
				        // 选择地区展示
				        showArea:false,
				        // 生日选择展示
				        showBirthday:false,
				        minDate: new Date(1950, 0, 1),
				        maxDate: new Date(),
				        currentDate: new Date(),
			}
		},
		methods: {
			confirm(e) {
				console.log(e)
				uni.showToast({
					icon: 'none',
					duration: 3000,
					title: e.value
				})
			},
			 popUp1 () {
			        this.$refs['pop'].show()
			    },
				pop2 () {
				       this.$refs['pop'].show()
				   },
			 //返回上一层
			      toBack(){
			        this.$router.go(-1);
			      },
			      onSelect(item) {
			        // 默认情况下点击选项时不会自动收起
			        // 可以通过 close-on-click-action 属性开启自动收起
			        this.showSex = false;
			        console.log(item.name);
			      },
			      // 地址取消事件
			      cancelArea(res){
			        this.showArea = false;
			      },
			      // 地址确定事件
			      confirmArea(res){
			        console.log(res);
			        this.showArea = false;
			      },
			      // 生日取消事件
			      cancelBirthday(res){
			        this.showBirthday = false;
			      },
			      // 生日确定事件
			      confirmBirthday(res){
			        console.log(res);
			        this.showBirthday = false;
			      },
				  btnClick() {
				          this.$refs.selectAddress.show()
				      },
				      successSelectAddress(address){ //选择成功回调
				      console.log(address)
				          },
		}
	}
</script>

<style>
.demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }

  .content {
    padding: 16px 16px 160px;
  }
</style>
